<!DOCTYPE html>
<html>
	<head>
		<title>Argus: hijacking as path</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta charset="utf-8">
		
		<style>
		html, body, #map_canvas {
			font-size: 20pt;
			height: 100%;
			margin: 0px;
			padding: 0px
		}
		.customBox {
			font-size: 14pt;
			width: 300px;
			height: 300px;
			border-style: ridge;
			border-width: 6px;
			border-color: red;
			background-color: #A2C1EE;
			position: absolute
		}

		</style>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABr0u2Ibrr0CZmxaGnOhHWsOKar7ZFWaA&sensor=false"></script>
	<script src="/static/markerwithlabel.js" type="text/javascript"></script>
	<script src="/static/textoverlay.js"></script>
	<style type="text/css">
    .labels {
      color: black;
      background-color: transparent;
      font-family: "Lucida Grande", "Arial", sans-serif;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      width: 60px;     
      white-space: nowrap;
    }
    .alerts {
      color: red;
      text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
      background-color: transparent;
      font-family: "Lucida Grande", "Arial", sans-serif;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      width: 60px;     
      white-space: nowrap;
    }
    .prefix {
      color: green;
      text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
      background-color: transparent;
      font-family: "Lucida Grande", "Arial", sans-serif;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      width: 200px;     
      white-space: nowrap;
    }
	</style>
	<script type="text/javascript">


  function initializemap() {
	var info;
	var np=0;
	var nup=0;
	var time_dec="";
	var pfx_dec="";
	var badseg_dec = "为";

		var myLatLng = new google.maps.LatLng(25, 0);
		var zoomlevel = 2;
		if (screen.height > 2000){
			zoomlevel = 4;
		}
		else if (screen.height > 1000) {
			zoomlevel = 3;
		}
		var myOptions = {
		  zoom: zoomlevel,
		  center: myLatLng,
		  mapTypeId: google.maps.MapTypeId.TERRAIN
		};
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	// exmaple path
	///*
	
	// bad path
	/*
	{% if badpaths %}
	{% for onepath in badpaths %}
		var path = [];
		{% for point in onepath %}
			path.push(new google.maps.LatLng({{point.lat}}, {{point.longi}}));
		{% endfor %}
		var asPath = new google.maps.Polyline({
		  path:path,
		  strokeColor: "#FFFF00",
		  strokeOpacity: 1.0,
		  strokeWeight: 2
		});
		asPath.setMap(map);
	{% endfor %}
	{% endif %}
	*/
	//good path
	/*{% if goodpaths %}
	{% for onepath in goodpaths %}
		var path = [];
		{% for point in onepath %}
			path.push(new google.maps.LatLng({{point.lat}}, {{point.longi}}));
		{% endfor %}
		var asPath = new google.maps.Polyline({
		  path:path,
		  strokeColor: "#33FF00",
		  strokeOpacity: 1.0,
		  strokeWeight: 2
		});
		asPath.setMap(map);
	{% endfor %}
	{% endif %}
	*/
	//bad path segment
	var path = [];
	var i=0;
	{% for point in badpathsegment %}
		path.push(new google.maps.LatLng({{point.lat}}, {{point.longi}}));
		badseg_dec = badseg_dec + "<a style=\"color:red\" href=\"http://bgp.he.net/AS{{point.asn}}#_whois\" target=\"_blank\">AS{{point.asn}}</a> ";
		i++;
	{% endfor %}
	if(i>1) {
		badseg_dec="路径"+badseg_dec;
	}
    var yellowimage = {
		url: "/static/circle_yellow.png",
		origin: new google.maps.Point(0,0),
		anchor: new google.maps.Point(12,12)
	};
	var greenimage = {
		url: "/static/mm_32_green.png",
		size: new google.maps.Size(24, 40),
		origin: new google.maps.Point(0,0),
		anchor: new google.maps.Point(15,30)
	};
	var redimage = {
		url: "/static/red_circle.png",
		scaledSize: new google.maps.Size(18, 18),
		origin: new google.maps.Point(0,0),
		anchor: new google.maps.Point(9,9)
	};
	/*
	{% for point in goodpoints %}
			var latLng = new google.maps.LatLng({{point.lat}} + Math.random() * 0.2 - 0.1, {{point.longi}} + Math.random() * 0.2 - 0.1);
			var title = "AS ".concat({{point.title}});
		    var marker1 = new MarkerWithLabel({
		      position: latLng,
		      draggable: true,
		      map: map,
		      labelContent: title,
		      labelAnchor: new google.maps.Point(32, -12),
		      labelClass: "labels", // the CSS class for the label
		      labelStyle: {opacity: 1},
			  icon: yellowimage
		    });
	{% endfor %}
	*/
	{% for point in badpoints %}
			var latLng = new google.maps.LatLng({{point.lat}} + Math.random() * 0.2 - 0.1, {{point.longi}} + Math.random() * 0.2 - 0.1);
			var title = "AS ".concat({{point.title}});
		    var marker1 = new MarkerWithLabel({
		      position: latLng,
		      draggable: true,
		      map: map,
		      labelContent: title,
		      labelAnchor: new google.maps.Point(32, -9),
		      labelClass: "alerts", // the CSS class for the label
		      labelStyle: {opacity: 1},
		      icon: redimage
		    });
	{% endfor %}

	{% if pfxpoint %}
	time_dec = "{{time}}";
	var pos = new google.maps.LatLng({{pfxpoint.lat}}, {{pfxpoint.longi}});
	var pfx;
	if({{pfxpoint.prefix_AS}}==0) {
		pfx = "{{pfxpoint.prefix_dec}}";
		pfx_dec = "前缀<span style=\"color:red\">{{pfxpoint.prefix_dec}}</span>被劫持</li>";
	}
	else {
		pfx = "{{pfxpoint.prefix_dec}} @ AS {{pfxpoint.prefix_AS}}";
		pfx_dec = "前缀<span style=\"color:red\">{{pfxpoint.prefix_dec}}</span>被劫持</li><li>该前缀原属于<a style=\"color:red\" href=\"http://bgp.he.net/AS{{pfxpoint.prefix_AS}}#_whois\" target=\"_blank\">AS{{pfxpoint.prefix_AS}}</a></li>";
	}

        var greendot = {
                url: "/static/green-dot.png",
                scaledSize: new google.maps.Size(36, 36)
        };

	var marker = new MarkerWithLabel({
		//icon: "/static/green-dot.png",
		icon: greendot,
		position: pos,
		draggable: true,
		map: map,
		title: pfx,
		labelContent: pfx,
		labelAnchor: new google.maps.Point(50,50),
		labelClass: "prefix",
		labelStyle: {opacity: 1}
	});
	{% endif %}

	var asPath = new google.maps.Polyline({
	  path:path,
	  strokeColor: "#FF0000",
	  strokeOpacity: 1.0,
	  strokeWeight: 2
	});
	asPath.setMap(map);
	
        var purplebulb = {
                url: "/static/purple-bulb.png",
                scaledSize: new google.maps.Size(32, 32),
                origin: new google.maps.Point(0,0),
                anchor: new google.maps.Point(9,9)
        };

        {% for point in pollutedList %}
                        var latLng = new google.maps.LatLng({{point.lat}} + Math.random() * 4 - 2, {{point.longi}} + Math.random() * 4 -2);
                        var titleAS = "Monitor ".concat({{point.eye_id}}).concat("@AS ").concat({{point.asn}});
                        var title = "Monitor ".concat({{point.eye_id}});
                    var marker1 = new MarkerWithLabel({
                      position: latLng,
                      draggable: true,
                      map: map,
		      title: titleAS,
                      //labelContent: title,
                      labelAnchor: new google.maps.Point(32, -12),
                      labelClass: "alerts", // the CSS class for the label
                      labelStyle: {opacity: 1},
                      icon: purplebulb
                    });
		np=np+1;
        {% endfor %}
	var latLng = new google.maps.LatLng(40.007883, 116.320555);
	var titleAS = "Monitor 0@AS4538";
	var marker1 = new MarkerWithLabel({
                      position: latLng,
                      draggable: true,
                      map: map,
                      title: titleAS,
                      //labelContent: title,
                      labelAnchor: new google.maps.Point(32, -12),
                      labelClass: "alerts", // the CSS class for the label
                      labelStyle: {opacity: 1},
                      icon: purplebulb
        });
	np=np+1;


        var greenbulb = {
                url: "/static/green-bulb.png",
                scaledSize: new google.maps.Size(9, 18),
                origin: new google.maps.Point(0,0),
                anchor: new google.maps.Point(9,9)
        };
        {% for point in unpollutedList %}
                        var latLng = new google.maps.LatLng({{point.lat}} + Math.random() * 4 - 2, {{point.longi}} + Math.random() * 4 - 2);
                        var titleAS = "Monitor ".concat({{point.eye_id}}).concat("@AS ").concat({{point.asn}});
                        var title = "Monitor ".concat({{point.eye_id}});
                    var marker1 = new MarkerWithLabel({
                      position: latLng,
                      draggable: true,
                      map: null,
		      title: titleAS,
                      //labelContent: title,
                      labelAnchor: new google.maps.Point(32, -12),
                      labelClass: "labels", // the CSS class for the label
                      labelStyle: {opacity: 1},
                      icon: greenbulb
                    });
		nup=nup+1;
        {% endfor %}
	
	nm=np+nup;
	nmp=Math.round(np*100/nm);

	//info="";
	info="<ul><li><span style=\"color:red\">" + time_dec + "</span>发现" + pfx_dec + "<li>异常AS" + badseg_dec + "</li><li>共使用了<span style=\"color:red\">" + nm + "</span>个监测点，其中<span style=\"color:red\">" + np + "</span>个监测点受到影响</li><li>估测约<span style=\"color:red\">" + nmp + "%</span>的互联网受到影响</li></ul>";

	//use TxtOverlay
	customText="<div style=\"font-weight:bold\"><table width=100%><tr><td style=\"font-size:16pt;text-align:center\">前缀劫持事件信息</td></tr><tr><td id=\"num_points\">" + info +"</td></tr><tr><td style=\"text-align:center\"><a href=\"/fingerprints/{{pfxpoint.aid}}/\"  target=\"_blank\">劫持详细信息</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a href=\"/alarms/\"  target=\"_blank\"> 更多劫持事件</a></td></tr></table></div>";
	txt = new TxtOverlay(new google.maps.LatLng(0, 200),customText,"customBox",map);
  }
</script>
</head>
<body onload="initializemap()">
<!-- <p>
bad path:
{% for onepath in badpaths %}
	{% if onepath %}
	{% for point in onepath %}
		({{point.lat}}, {{point.longi}}, {{point.title}})、
	{% endfor %}
	
	{% endif %}
	<br />
{% endfor %}
</p>
<p>
good path:
{% for onepath in goodpaths %}
	{% if onepath %}
	{% for point in onepath %}
		({{point.lat}}, {{point.longi}}, {{point.title}})、
	{% endfor %}
	
	{% endif %}
	<br />
{% endfor %}
</p>
<p>
bad path segment:

{% for point in badpathsegment %}
	({{point.lat}}, {{point.longi}}, {{point.title}})、
{% endfor %}

</p> -->
<!--<p>
polluted:

{% for point in pollutedList %}
        ({{point.eye_id}}, {{point.asn}}, {{point.lat}}, {{point.longi}}, {{point.title}})、
{% endfor %}

</p>
<p>
unpolluted:

{% for point in unpollutedList %}
        ({{point.eye_id}}, {{point.asn}}, {{point.lat}}, {{point.longi}}, {{point.title}})、
{% endfor %}

</p> 
    <div>
        <table width="100%"><tr>
          <td align='right'>
                <a href="/fingerprints/{{pfxpoint.aid}}/"  target="_blank"> 劫持详细信息</a> <a> &nbsp </a>
                <a href="/alarms/"  target="_blank"> 更多劫持事件 </a>
          </td>
        </tr></table>
    </div>
-->
  <div id="map_canvas"></div>
</body>
</html>
